<template>
    <div>
        <!-- header区域 -->
        <header class="category-header wrap">
            <i class="iconfont icon-left" @click="gohome"></i>
            <div class="header-search">
                <i class="iconfont icon-search"></i>
                <input class="search-title"  placeholder="11.11随心所欲Go"/>
            </div>
            <i class="iconfont icon-More"></i>
        </header>
        <!-- 内容区域 -->
        <section class="category-wrap" ref="categoryWrap">
            <!-- 左侧分类导航 -->
            <div class="nav-side-wrapper" ref="sidewrapper">
                <ul class="nav-side">
                    <li v-for="(item,index) in categoryData" :key="index" :class="{'active':currentIndex===index}" @click="selectMenu(index)">{{item.name}}</li>
                </ul>
            </div> 
            <!-- 右侧商品数据 -->
            <div class="content-wrapper" ref="contentwrapper">
                <div class="content-slide" v-for="(item,index) in categoryList" :key="index" :categoryList="categoryList">
                    <img :src="item.mainImgUrl" class="category-main-img">
                    <div class="category-list" v-for="(catogory,index) in item.list" :key="index">
                        <p class="catogory-title" >{{catogory.title}}</p>
                        <div class="product-item" v-for="(product,index) in catogory.productList" :key="index">
                            <img :src="product.imgUrl" class="product-img">
                            <p class="product-title">{{product.title}}</p>
                        </div>
                    </div>
                </div>
            </div> 
        </section>
        <!-- 底部导航栏  -->
         <tabBar :active="1"></tabBar>
    </div>
</template>
<script>
import tabBar from '@/components/tabBar';
// 引入局部滚动工具库
import BScroll from "better-scroll";
import { getcategoryData } from '@/http/index';

export default {
   components:{
       tabBar,
   },
   data() {
        return {
            //分类数据
            categoryData: [],
            //左侧分类高亮
            currentIndex: 0
        }
    },
   methods:{
        //后退跳转到首页
        gohome(){
            this.$router.push('/home')
        },
        //获取分类数据
        fetchCategory() {
                getcategoryData().then(res => {
                    this.categoryData = res
                    // 初始化better-scroll
                    this.$nextTick(() => {//回调函数
                        //局部页面滚动：没超过父元素，不能滑动，超过了可以滑动
                        //参数1 ：需要滚动的子元素
                        //参2:相关配置
                        new BScroll(this.$refs.sidewrapper, {disableTouch: false,disableMouse: false,})
                        new BScroll(this.$refs.contentwrapper, {disableTouch: false,disableMouse: false,})
                   
                   });
                })
        },
         // 固定父容器高度
        setSearchWrapHeight() {
            //可视区的高度（不包括边框）
            let $screenHeight = document.documentElement.clientHeight
            // 头部高度
            let headEleH=document.querySelector('.category-header').clientHeight
            //$refs获取 DOM 对象的接口 ，用html 的ref属性来获取 - 头部搜索框的高度
            this.$refs.categoryWrap.style.height = $screenHeight - 50 -headEleH+ 'px'
        },
        //左侧高亮切换
        selectMenu(index) {
            this.currentIndex = index
        },
   },
   computed: {
       //右侧数据展示
        categoryList() {
            return this.categoryData.filter((v, i) => this.currentIndex == i)
        }
    },
   //实例创建之后
   created() {
        this.fetchCategory()
    },
   //页面渲染之后
    mounted() {
         this.setSearchWrapHeight()
    },
}
</script>
<style lang="scss" scoped>
// 公共样式
@import '../../common/style/mixin';
// 单独样式
@import '../../css/category';
</style>